<template>
    <div 
        class="yang" 
        :style="{width:selfWidth+'px',height:selfHeight+'px'}"
        ref="yang"></div>
</template>
<script>
export default {
    name:'Yang',
    props:{
        Width:{
            type:String,
            required:false,
            default:'100px'
        }
    },
    data(){
        return{
            selfWidth:'',
            selfHeight:''
        }
    },
    mounted(){
        this.Calc()
    },
    methods:{
        Calc(){
            // 接受%和px
             if(this.Width.indexOf('%')>-1){
                //this.Width是百分比
                this.selfWidth=this.Width
                this.selfWidth=this.$refs.yang.offsetWidth
             }else{
                this.selfWidth=parseInt(this.Width)
                if(isNaN(this.selfWidth)){
                    this.selfWidth=1
                }
             }
            this.selfWidth=this.selfWidth<10?10:this.selfWidth
            this.selfHeight=this.selfWidth/8
        }
    }
}
</script>
<style scoped>
.yang{
    background-color: #000;
}
</style>>